<template>
	<view class="product">
		<view class="box" v-for="(item,index) in list" :key="index" @click="togoodsinfo(item)"
			:style="{'background':index==0&&logo==true?'#fff8f7':index==1&&logo==true?'#fbfaff':''}">
			<view class="product_img">
				<!-- <image :src="item.url"></image> -->
				<image :src="loading==true?'../static/load.png':item.url" @load="load()"></image>
				<!-- <view class="spinner" v-else>
					<view class="double-bounce1"></view>
					<view class="double-bounce2"></view>
				</view> -->
				<!-- <image v-if="logo&&!loading" class="re" src="../../static/rx.png"></image> -->
				<!-- <image v-if="logo" class="re" src="../../static/image/rx.png"></image> -->
			</view>
			<view class="info">
				<view class="title">{{item.goods_name}}</view>
				<!-- ship_method  1邮寄 2当日达  -->
				<!-- <view class="text">现货发售</view> -->
				<view class="logobox" style="background-color: cornflowerblue;" v-if="item.ship_method==1">邮寄</view>
				<view class="logobox" style="background-color: brown;" v-if="item.ship_method==2">自提/隔日配送</view>
				<view class="price">
					<view class="x_price"><text>￥</text>{{item.goods_price_min}}</view>
					<view class="y_price" v-if="parseInt(item.line_price_min)>0" style="text-decoration: line-through;">
						￥{{item.line_price_min}}</view>
				</view>
			</view>
			<image v-if="index==0&&logo==true" class="logo" src="../static/bg2.png"></image>
			<image v-if="index==1&&logo==true" class="logo" src="../static/bg3.png"></image>
		</view>
	</view>

</template>

<script>
	export default {
		name: "product",
		props: {
			list: {
				type: Array,
				default: []
			},
			logo: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				loading: true,
			};
		},
		methods: {
			togoodsinfo(item) {
				this.$emit('togoodsinfo', item)
			},
			load() {
				console.log('加载')
				this.loading = false
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.product {
		width: 690rpx;
		padding-top: 24rpx;
		margin: 0 auto 0 auto;
		// background-color: #f2f2f2;
		// padding: 0 30rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: 18rpx;
		box-sizing: border-box;
	}

	.box {
		width: 336rpx;
		min-height: 520rpx;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		background-color: #fff;
		position: relative;

		.logo {
			position: absolute;
			bottom: 0;
			right: 0;
			width: 83rpx;
			height: 63rpx;
		}

		.product_img {
			width: 336rpx;
			height: 336rpx;
			// background: #C6CA53;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			flex-shrink: 0;
			position: relative;

			image {
				width: 336rpx;
				height: 336rpx;
				border-radius: 20rpx 20rpx 0rpx 0rpx;
			}

			.re {
				position: absolute;
				left: 0;
				width: 82rpx;
				height: 70rpx;
			}
		}

		.info {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			gap: 22rpx;
			padding: 14rpx;
			height: 100%;

			.title {
				font-size: 30rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #222222;
				line-height: 32rpx;
			}

			.logobox {
				width: fit-content;
				padding: 0 15rpx;
				border-radius: 13rpx;
				color: #FFF;
				height: 35rpx;
				line-height: 35rpx;
				font-size: 26rpx;
			}

			.text {
				font-size: 20rpx;
				font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
				font-weight: normal;
				color: #888888;
				line-height: 22rpx;
			}

			.price {
				display: flex;
				// justify-content: space-between;
				align-items: center;
				overflow: hidden;

				.x_price {
					font-size: 36rpx;
					font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
					font-weight: normal;
					color: #F94D29;

					text {
						font-size: 24rpx;
					}
				}

				.y_price {
					font-size: 26rpx;
					font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
					font-weight: normal;
					color: #888888;
				}
			}
		}

	}
</style>